<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:;base64,=">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
    <!-- 这里一定要先引入bootstrap.js，不然会报错，具体参见bootstrap文档 -->
    <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.5.1.js') }}"></script>

    <style>
        html, body {
            height: 100%;
            width: 100%;
        }
    </style>

    <title>{% block title %}{% endblock %}</title>
</head>
<body style="overflow-x: hidden; overflow-y: hidden">
<header class="container" style="height: 10%">
    <nav class="navbar navbar-dark navbar-expand-sm bg-dark" style="font-size: 20px">
        <a class="navbar-brand offset-1" style="font-size: 25px" href="#">Report-generator</a>

        <button class="navbar-toggler offset-10" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse offset-1 offset-lg-0 col-2" id="collapsibleNavbar">
            <ul class="navbar-nav col-3">
                <li class="nav-item">
                    <a class="nav-link" href="https://gitee.com/lielie4780/report-generator">Gitee</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://gitee.com/lielie4780/report-generator/issues">Issue</a>
                </li>
                <li class="nav-item">
                    <button class="nav-link btn-dark bg-dark border-0" id="about" data-toggle="modal"
                            data-target="#aboutModal">About
                    </button>
                </li>
            </ul>
        </div>

        <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Report-generator v1.0.0</h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div>实验报告生成器，版本1.0.0</div>
                        <div>前端基于Bootstrap和JQuery</div>
                        <div>后端基于Flask,Pygments和Python-docx</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>

{% block main %}
{% endblock %}

<div class="row" style="height: 5%">
    <footer class="jumbotron text-center blockquote-footer" style="margin-bottom: 0">
        <p>Copyright 2020 九月家的敖烈</p>
    </footer>
</div>

{% block script %}
{% endblock %}

</body>
</html>